<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-11-24 19:16:16
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-05 15:09:05
 * @FilePath: /nhw/src/components/UploadImage/index.vue
-->
<template>
  <div class="upload-image-container">
    <Field
      label="照片"
      label-width="8em"
      readonly
      :border="false"
      style="padding-top: 0; padding-bottom: 0"
    />
    <Cell>
      <Uploader
        v-model="fileList"
        multiple
        :after-read="emitFiles"
        @delete="deletePreImage"
      />
    </Cell>
  </div>
</template>

<script>
import { Field, Uploader, Cell } from "vant";
export default {
  name: "UploadImage",
  components: { Field, Uploader, Cell },
  data() {
    return {
      fileList: [],
    };
  },

  mounted() {},

  methods: {
    emitFiles() {
      this.$emit("ongetimage", this.fileList);
    },
    deletePreImage() {
      this.$emit("ongetimage", this.fileList);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~@/style/var.less");
.upload-image-container {
  .van-field {
    padding-top: 0;
    padding-bottom: 0;
  }
  /deep/.van-uploader__upload {
    border: 2px dashed @primary;
    width: 110px;
    height: 110px;
    border-radius: 4px;
    background: #fff;
    .van-icon {
      color: @primary;
      &::before {
        content: "\F0A2";
      }
    }
  }

  /deep/.van-uploader__preview .van-uploader__preview-image {
    width: 110px;
    height: 110px;
  }
}
</style>